<template>
	<view class="container">
		<MpWeixin v-if="isMpWeixinAuth" @success="onGetUserInfoSuccess" />
		<Main v-else :partyData="partyData"></Main>
	</view>
</template>

<script>
	import MpWeixin from './components/mp-weixin'
	import Main from './components/main'
	import storage from '@/utils/storage'
	import { ACCESS_TOKEN, USER } from '@/store/mutation-types'
	export default {
		components: {
			MpWeixin,
			Main
		},
		data() {
			return {
				// 是否显示微信小程序授权登录
				isMpWeixinAuth: true,
				partyData:{}
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		async onLoad(options) {
			this.getLoginUserInfo();
			if(!uni.$unt.isEmptyObject(options)&&options.isMpWeixinAuth==false){
				this.isMpWeixinAuth = false
			}
		},

		methods: {
			getLoginUserInfo(){
				const token = storage.get(ACCESS_TOKEN);
			},
			// 获取到用户信息的回调函数
			onGetUserInfoSuccess(data) {
				// 记录第三方用户信息数据
				this.partyData = data
				// 显示注册页面
				this.isMpWeixinAuth = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		font-size: 32rpx;
		background: #fff;
		min-height: 100vh;
	}

	.wechatapp {
		padding: 80rpx 0 48rpx;
		border-bottom: 1rpx solid #e3e3e3;
		margin-bottom: 72rpx;
		text-align: center;

		.header {
			width: 190rpx;
			height: 190rpx;
			border: 4rpx solid #fff;
			margin: 0 auto 0;
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 2rpx 0 10rpx rgba(50, 50, 50, 0.3);

			.image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}

	.auth-title {
		color: #585858;
		font-size: 34rpx;
		margin-bottom: 40rpx;
	}

	.auth-subtitle {
		color: #888;
		margin-bottom: 88rpx;
		font-size: 28rpx;
	}

	.login-btn {
		padding: 0 20rpx;

		.button {
			height: 88rpx;
			background: #04be01;
			color: #fff;
			font-size: 30rpx;
			border-radius: 999rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}


	.no-login-btn {
		margin-top: 20rpx;
		padding: 0 20rpx;

		.button {
			height: 88rpx;
			background: #dfdfdf;
			color: #fff;
			font-size: 30rpx;
			border-radius: 999rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>